<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-table border :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" sortable min-width="80">
        </el-table-column>
        <el-table-column
          prop="traderSignalName"
          label="信号名称"
          min-width="100"
        >
        </el-table-column>
        <el-table-column prop="userName" label="订阅账户名称" min-width="130">
        </el-table-column>
        <el-table-column
          prop="dataFactoryName"
          label="数据场"
          sortable
          min-width="120"
        >
        </el-table-column>
        <!-- 信号状态 -->
        <el-table-column prop="status" label="信号状态" min-width="100">
          <template slot-scope="scope">
            <!-- <el-button size="mini"  v-if="scope.row.status == 1">启用</el-button>
                        <el-button size="mini" type="danger" v-if="scope.row.status == 2">停用</el-button> -->
            <span v-if="scope.row.status == 1">启用</span>
            <span v-if="scope.row.status == 2">停用</span>
          </template>
        </el-table-column>
        <el-table-column prop="signalType" label="信号类型" min-width="200">
          <template slot-scope="scope">
            <!-- <el-button size="mini"  v-if="scope.row.status == 1">启用</el-button>
                        <el-button size="mini" type="danger" v-if="scope.row.status == 2">停用</el-button> -->
            <el-select disabled v-model="scope.row.signalType" placeholder="请选择">
              <el-option
                v-for="item in signalTypeList"
                :key="item.id"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <!-- ? -->
        <el-table-column
          prop="tradeOrderNum"
          label="近一周交易数"
          sortable
          min-width="130"
        >
        </el-table-column>
        <!-- ? -->
        <el-table-column
          prop="argProfitLoss"
          label="近一周单均盈亏"
          sortable
          min-width="150"
        >
        </el-table-column>
        <!-- ? -->
        <el-table-column
          prop="subscribers"
          label="近一周订阅人数"
          sortable
          min-width="150"
        >
        </el-table-column>
        <!-- <el-table-column prop="" label="近一周订阅数" sortable min-width="150">
                </el-table-column> -->
        <el-table-column
          prop="currentSubscribers"
          label="当前订阅人数"
          sortable
          min-width="150"
        >
        </el-table-column>
        <el-table-column prop="feeFixed" label="概率豆费用" min-width="100">
        </el-table-column>
        <!-- <el-table-column prop="status" label="订阅状态" min-width="100">
                    <template slot-scope="scope">
                        <el-button size="mini" type="info" v-if="scope.row.status == 1">启用</el-button>
                        <el-button size="mini" type="danger" v-if="scope.row.status == 2">停用</el-button>
                    </template>
                </el-table-column> -->
        <el-table-column prop="" label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="editTrade(scope.row)"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="block m-bottom-15">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!--  弹窗 -->
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="35%"
      top="10vh"
    >
      <div class="dialog_box">
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>账号类型</span></div>
          <div>
            <el-select
              v-model="followObj.traderAccountType"
              placeholder="请选择"
              class="m_right_15"
              @change="selectAccount"
            >
              <el-option
                v-for="item in accountTypeOptions"
                :key="item.value"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>跟单账号</span></div>
          <div>
            <UserSearchable
              ref="user2"
              v-model="followObj.traderAccountId"
              :type="'getMasterAccountType'"
              :params="{
                traderAccountType: followObj.traderAccountType,
                followType: 2,
                status: 1,
              }"
            >
              <template #dropdownTitle>
                <span>id</span>
                <span>昵称</span>
                <span>权限</span>
              </template>
              <template v-slot:dropdown="{ item }">
                <span
                  v-show="followObj.traderAccountType == '2'"
                  class="span_wh"
                >
                  <span>{{ item.id }}</span>
                  <span>{{ item.nickName }}</span>
                  <span>{{ item.dataFactoryName }}</span>
                </span>
                <span
                  v-show="followObj.traderAccountType == '1'"
                  class="span_wh"
                >
                  <span>{{ item.id }}</span>
                  <span>{{ item.account }}</span>
                  <span>{{ item.adminName }}</span>
                </span>
              </template>
            </UserSearchable>
          </div>
        </div>
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>交易员信号</span></div>
          <div>
            <el-input
              v-model="followObj.traderSignalName"
              placeholder="交易员信号"
              disabled
            ></el-input>
          </div>
        </div>
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>跟单倍数</span></div>
          <div>
            <el-input
              v-model="followObj.multiple"
              placeholder="跟单倍数"
            ></el-input>
          </div>
        </div>

        <div class="flex_center">
          <div class="box_left"><span>*</span><span>跟单方向</span></div>
          <div>
            <el-select
              v-model="followObj.strategy"
              placeholder="请选择"
              class="m_right_15"
            >
              <el-option
                v-for="item in strategyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>限制多空</span></div>
          <div>
            <el-select
              v-model="followObj.restrict"
              placeholder="请选择"
              class="m_right_15"
            >
              <el-option
                v-for="item in restrictOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex_center">
          <div class="box_left"><span>*</span><span>状态</span></div>
          <div>
            <el-radio-group v-model="followObj.status">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="2">关闭</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAdd">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts";
import UserSearchable from "@/components/UserSearchable";
import { getDictData } from "@/api/transaction";

import { tradeSign, addTraderfollow } from "@/api/user";
// import { da } from 'date-fns/locale';
export default {
  name: "realTimeMonitor",

  components: {
    UserSearchable,
  },

  data() {
    return {
      // 饼图数据
      pieData: [],
      signalTypeList: [],
      tableData: [
        {
          feeFixed: 10,
          createBy: "yyy",
          createTime: "2018",
          currencyId: "CNY",
          dataFactoryName: "数据场",
          delBy: "删除者",
          delFlag: "1",
          delTime: "2059",
          id: 1,
          remark: "描述",
          status: 1,
          traderAccountId: 0,
          traderSignalName: "信号名称",
          updateBy: "更新者",
          updateTime: "2019",
          userName: "交易员名称",
        },
      ],

      tableData2: [
        {
          feeFixed: 10,
          createBy: "yyy",
          createTime: "2018",
          currencyId: "CNY",
          dataFactoryName: "数据场",
          delBy: "删除者",
          delFlag: "1",
          delTime: "2059",
          id: 1,
          remark: "描述",
          status: 1,
          traderAccountId: 0,
          traderSignalName: "信号名称",
          updateBy: "更新者",
          updateTime: "2019",
          userName: "交易员名称",
        },
      ],

      // 分页
      currentPage: 1,
      total: 0,
      limit: 10,

      followObj: {
        createBy: "",
        createTime: "",
        delBy: "",
        delFlag: "",
        delTime: "",
        followType: 2,
        id: "",
        multiple: "",
        remark: "",
        restrict: "",
        status: "",
        strategy: "",
        strategyWay: 1,
        traderAccountId: "",
        traderAccountType: "2",
        traderFollowName: "",
        traderSignalId: [],
        updateBy: "",
        updateTime: "",
        traderSignalName: "",
      },
      accountTypeOptions: [],
      strategyOptions: [
        {
          value: 1,
          label: "正",
        },
        {
          value: 2,
          label: "反",
        },
      ],
      restrictOptions: [
        {
          value: 0,
          label: "不限",
        },
        {
          value: 1,
          label: "多",
        },
        {
          value: 2,
          label: "空",
        },
      ],
      restrictOptions: [
        {
          value: 0,
          label: "不限",
        },
        {
          value: 1,
          label: "多",
        },
        {
          value: 2,
          label: "空",
        },
      ],
      dialogVisible: false,
    };
  },
  mounted() {
    this.getData();
    this.getDict();
  },

  methods: {
    // 数据请求
    getData() {
      let that = this;
      let data = {};
      data.limit = that.limit;
      data.page = that.currentPage;

      tradeSign(data)
        .then((res) => {
          console.log(res);

          that.limit = res.limit;
          that.total = res.total;
          that.currentPage = res.page;

          that.tableData = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    formatter(row, column) {
      return row.address;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      let that = this;
      that.limit = val;
      that.getData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let that = this;
      that.currentPage = val;
      that.getData();
    },
    getDict() {
      getDictData("yj_trader_type")
        .then((res) => {
          console.log("字典变量数据", res);
          this.accountTypeOptions = res;
        })
        .catch((res) => {
          console.log(res);
        });
      getDictData("yj_controls_type")
        .then((res) => {
          console.log("字典变量数据", res);
          this.signalTypeList = res;
        })
        .catch((res) => {
          console.log(res);
        });
    },
    editTrade(obj) {
      console.log(obj);
      let that = this;

      // that.followObj=JSON.parse(JSON.stringify(obj))
      that.followObj.traderSignalName = JSON.parse(
        JSON.stringify(obj.traderSignalName)
      );
      that.followObj.traderSignalId = [];
      that.followObj.traderSignalId.push(obj.id);

      that.dialogVisible = true;
    },
    saveAdd() {
      // console.log('确定！！！')
      let that = this;
      let obj = that.followObj;

      console.log(obj);

      if (that.followObj.traderAccountType == "") {
        that.$message.warning("请选择账号类型！");
        return;
      }
      if (that.followObj.traderAccountId == "") {
        that.$message.warning("请选择跟单账号！");
        return;
      }

      if (that.followObj.traderSignalName == "") {
        that.$message.warning("请选择交易员信号！");
        return;
      }
      if (that.followObj.multiple == "") {
        that.$message.warning("请输入跟单策略！");
        return;
      }
      if (that.followObj.strategy == "") {
        that.$message.warning("请选择跟单方向！");
        return;
      }
      // if(that.followObj.restrict==""){
      //     that.$message.warning('请选择限制！')
      //     return
      // }
      if (that.followObj.status == "") {
        that.$message.warning("请选择状态！");
        return;
      }

      // obj.traderSignalId = []
      // obj.traderSignalId.push(that.followObj.id)

      addTraderfollow(obj)
        .then((res) => {
          console.log("添加成功", res);
          that.$message.success("添加成功!");
          that.getData();

          that.followObj = {
            createBy: "",
            createTime: "",
            delBy: "",
            delFlag: "",
            delTime: "",
            followType: 2,
            id: "",
            multiple: "",
            remark: "",
            restrict: "",
            status: "",
            strategy: "",
            strategyWay: 1,
            traderAccountId: "",
            traderAccountType: "2",
            traderFollowName: "",
            traderSignalId: [],
            updateBy: "",
            updateTime: "",
            traderSignalName: "",
          };
          that.dialogVisible = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    selectAccount(e) {
      // console.log('当前选择:' + e)
      this.followObj.traderAccountType = e;
      this.followObj.traderAccountId = "";
      // console.log('当前选择表格下标1实盘，2模拟:' + this.followObj.traderAccountType)

      this.$nextTick(() => {
        this.$refs.user2.remoteMethod();
        this.$refs.user2.setLabelValue();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.sectionPie {
  display: flex;
  justify-content: center;
}

.box-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.dis_flex {
  display: flex;
}

.m-right-15 {
  margin-right: 15px;

  text-align: center;
  font-weight: bold;
}

.dialog_box {
  padding: 10px;
}

.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  // width: 100%;
}

.flex_center > div {
  width: 30%;
}

.flex_center div:last-child {
  width: 85%;
}

.color_green {
  color: #13ce66;
}

.color_red {
  color: #ff4949;
}

.box_left span:first-child {
  color: red;
  margin-right: 3px;
}

.delete_title {
  text-align: center;
  font-size: 18px;
}

.color_red_delete {
  color: red;
  margin: 0 10px;
  font-weight: bold;
}

.box_left span:last-child {
  font-weight: bold;
}

.flex_left {
  display: flex;
  justify-content: flex-start;
}

.input-wh {
  width: 200px;
  text-align: center;
  margin-right: 15px;
}

.flex_center_left {
  align-items: center;
}

.span_wh {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
